<template>
  <div style="min-height:600px;">
    <el-col :span="24">
      <div class="groupkj oh" id="item6">
        <div class="groupleft">
          <el-carousel>
            <!--<el-carousel-item v-for="item in (product.productMainPic.split('|'))" :key="item">-->
              <!--<img :src="item">-->
            <!--</el-carousel-item>-->
          </el-carousel>
          <div id="priceCalender">
            <!--<calendar ref="calend" :range="calendarInfo.range" :lunar="calendarInfo.lunar"-->
                      <!--@selectM="selectM">-->
            <!--</calendar>-->
          </div>
        </div>
        <div class="groupright">
          <div class="f18 oh">
            <div class="fl mt10">
              <span class="f18 fb">{{product.productMainTitle}}</span><span class="f16">（{{product.productSubTitle}}）</span>
            </div>
          </div>
          <div class="mt20"><span>出游类型：</span><span class="ml5" v-if="product.productType=='group'">跟团游</span><span class="ml5" v-if="product.productType=='free'">自由行</span><span class="ml5" v-if="product.productType=='themt'">主题游</span><span class="ml20">出发城市：</span><span class="ml5">{{product.dpt}}</span><span class="ml20">产品编号：</span><span class="ml5">{{product.productCode}}</span></div>
          <div class="graybg_g mt10">
            <div class="oh">
              <div class="f13 fl mt10">价格：</div>
              <div class="offorange fl mt10">
                <span class="f12">￥</span>
                <span class="f24">1955</span>
                <span class="f12">元/人</span>
                <span class="ml20">价格说明</span>
                <span class="ml20 offgray">2份已售</span>
              </div>
            </div>
          </div>
          <div class="mt7">
            <span class="f13">产品特色：</span><span class="blue_b ml5" v-for="pf in (product.productFeatures.split(','))">{{pf}}</span>
          </div>
          <div style="border-bottom:1px solid #e0e0e0" class="pt10 pb10 offgray">
          </div>
          <div class="mt20 oh">
            <table class="itable" style="margin:auto;width:100%" cellspacing="0">
              <tr class="itb2" v-for="rf in (extend.recommendReasons.split('|'))">
               <td class="oforange" style="color: #ff7f0e;font-size: 14px">{{ rf.split('-')[0]}}</td><td style="width:74%;text-align:left;font-size: 14px">{{ rf.split('-')[1]}}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      <div class="graybg_g mt10" style="width: 1160px">
        <span class="offorange mt10" style="margin-left: 200px">
          <span class="f12">￥</span>
          <span class="f24">1955</span>
        </span>
        <div style="float: left;margin-left: 15px"><span style="height: 38px">日期：</span>
          <el-date-picker v-model="orderDate" type="date" placeholder="选择日期" :picker-options="pickerOptions0"></el-date-picker>
        </div>
        <div style="float: left;margin-left: 15px"><span style="height: 38px">成人：</span>
          <el-input-number v-model="aduNum" size="small" :min="0" style="width:193px;"></el-input-number>
        </div>
        <div style="float: left;margin-left: 15px">
          <span>儿童：</span>
          <el-input-number v-model="chiNum" size="small" :min="0" style="width:193px;"></el-input-number>
        </div>
        <el-button class="fr" @click="queryStock" type="primary" size="small">立即购买</el-button>
      </div>
    </el-col>
    <el-col :span="24">
      <div class="wp12">
        <div id="menu_fixed" class="oh" :class="{default: navCssflag==0, fixed: navCssflag==1 }">
          <div id="menu_d" style="display:block;float:left">
            <ul style="list-style:none;padding:0;margin:0;">
              <li>
                <a href="#item1" :class="{current: buybtnShow && navCssCount==1}">产品介绍</a>
              </li>
              <li>
                <a href="#item2" :class="{current: buybtnShow && navCssCount==2}">费用说明</a>
              </li>
              <li>
                <a href="#item3" :class="{current: buybtnShow && navCssCount==3}">购买须知</a>
              </li>
              <li>
                <a href="#item4" :class="{current: buybtnShow && navCssCount==4}">用户点评</a>
              </li>
              <li>
                <a href="#item5" :class="{current: buybtnShow && navCssCount==5}">成交记录</a>
              </li>
            </ul>
          </div>
          <div class="fr mr20 mt10" v-show="buybtnShow">
            <a href="#item6">
               <el-button type="primary" style="vertical-align:top;" @click="queryStock">立即购买</el-button>
            </a>
          </div>
        </div>
      </div>
      <div id="content_d" class="wp12" style="border:1px solid #e0e0e0;">
        <div class="item" id="item1" style="margin-top:20px">
          <div class="probt f18">产品介绍</div>
          <div class="ml30 mt20 f16">参考行程</div>
          <div class="ml50 f14 mt20">
            <span class="mr10">{{product.dpt}}</span><img src="../../tuyou/index/imgs/p1.png" class="vm"><span class="ml10">{{product.arr}}</span><span class="ml20">当天游玩主题：团队游行程</span>
          </div>
          <div class="ml50">
            <div class="mt20 f16 oh"  v-for="tp in trip">
              <div class="fl" style="width:100px"><span class="mr10">{{tp.tripStartTime}}</span>
                <img style="width: 20px" src="../../tuyou/index/imgs/g1.png" class="vm" v-if="tp.tripType == 'gather'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g2.png" class="vm" v-if="tp.tripType == 'traffic'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g2-1.png" class="vm" v-if="tp.trafficType == 'bus'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g2-2.png" class="vm" v-if="tp.trafficType == 'train'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g2-3.png" class="vm" v-if="tp.trafficType == 'hTrain'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g2-4.png" class="vm" v-if="tp.trafficType == 'flight'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g2-5.png" class="vm" v-if="tp.trafficType == 'ship'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g3.png" class="vm" v-if="tp.tripType == 'meals'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g4.png" class="vm" v-if="tp.tripType == 'hotel'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g5.png" class="vm" v-if="tp.tripType == 'spot'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g6.png" class="vm" v-if="tp.tripType == 'free'">
                <img style="width: 20px" src="../../tuyou/index/imgs/g7.png" class="vm" v-if="tp.tripType == 'shopping'">
              </div>
              <div class="fl f14" style="width:1000px">
                <div class="ml10"><span>{{tp.tripTitle}}</span></div>
                <div class="ml10 mt10 offgray">
                  <span  v-html="strRn(tp.tripDescribe)">
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" id="item2" style="margin-top:20px">
          <div class="probt f18">费用说明</div>
          <div class="ml30 mt20 f16">费用包含</div>
          <div class="ml50 f12"  v-html="strRn(extend.costInclude)">
          </div>
          <div class="ml30 mt30 f16">费用不含</div>
          <div class="ml50 f12"  v-html="strRn(extend.costExclude)">
          </div>
          <div class="ml30 mt30 f16">儿童价格说明</div>
          <div class="ml50 f12"  v-html="strRn(extend.costChild)">
          </div>
          <div class="ml30 mt30 f16">退改说明</div>
          <div class="ml50 f12" v-html="strRn(extend.tgsm)">
          </div>
        </div>
        <div class="item" id="item3" style="margin-top:20px">
          <div class="ml30 mt30 f16">重要注意事项：</div>
          <div class="ml50 f12"  v-html="strRn(extend.zyts)">
          </div>
          <div class="ml30 mt30 f16">友情提示：</div>
          <div class="ml50 f12"  v-html="strRn(extend.yqts)">
          </div>
        </div>
        <div class="item" id="item4" style="height:400px;margin-top:20px">
          <div class="probt f18">用户点评</div>
        </div>
        <div class="item" id="item5" style="height:400px;margin-top:20px">
          <div class="probt f18">成交记录</div>
        </div>
      </div>
    </el-col>
    <el-col :span="24">

    </el-col>
  </div>
</template>
<script type="text/ecmascript-6">
  import {resetBreads} from '../../tuyou/common/js/util.js'
  import $ from 'jquery'
  import calendar from './calendar2.vue'
  import priceCalender from '../../tuyou/common/js/priceCalenderPlugin/js/jquery.pricecalender.js'

  $(function () {
    priceCalender($)
    $('#priceCalender').priceCalender('init', {
      stockList: [
        {'adultSalePrice': 3591.00, 'adultSettlementPrice': 257.00, 'childSalePrice': 330.00, 'childSettlementPrice': 230.00, 'createtime': 1501746615000, 'date': '2017-07-30', 'differSalePrice': 70.00, 'differSettlementPrice': 50.00, 'id': 2022, 'isOverbooking': false, 'productId': 100, 'saleStock': 0, 'stock': 0},
        {'adultSalePrice': 3591.00, 'adultSettlementPrice': 257.00, 'childSalePrice': 330.00, 'childSettlementPrice': 230.00, 'createtime': 1501746615000, 'date': '2017-08-27', 'differSalePrice': 70.00, 'differSettlementPrice': 50.00, 'id': 1993, 'isOverbooking': false, 'productId': 100, 'saleStock': 0, 'stock': 44},
        {'adultSalePrice': 3591.00, 'adultSettlementPrice': 257.00, 'childSalePrice': 330.00, 'childSettlementPrice': 230.00, 'createtime': 1501746615000, 'date': '2017-09-01', 'differSalePrice': 70.00, 'differSettlementPrice': 50.00, 'id': 2013, 'isOverbooking': false, 'productId': 100, 'saleStock': 22, 'stock': 44}
      ],
      cellClick: function (stock) {
        alert(stock.date)
      }
    })
  })

  export default {
    data () {
      return {
        buybtnShow: false,
        navCssCount: 0,
        navCssflag: 0,
        orderDate: '', // 预定日期
        aduNum: 1, // 成人预定数量
        chiNum: 0, // 儿童预定数量
        calendarInfo: {
          range: true,
          lunar: true // 显示农历
        },
        product: {
          id: 0, // ID
          companyId: 0, // 公司id
          productCode: '', // 产品编号
          productType: '', // 产品类型
          gType: '', // 参团类型
          lineType: '', // 线路类型
          productState: true, // 产品状态
          auditState: 0, // 审核状态
          productMainTitle: '', // 途游产品名称主标题
          productSubTitle: '', // 途游产品名称副标题
          supplyProductName: '', // 供应商产品名称
          productMainPic: '', // 产品主图
          productPic: '', // 产品图片
          dpt: '', // 出发地
          arr: '', // 目的地
          productFeatures: '', // 产品特色
          tripDay: 0, // 行程天数
          tripNight: 0, // 行程晚数
          advanceDays: 0, // 提前预定天数
          auditResult: '', // 审核结果
          createTime: '', // 创建时间
          minSalePrice: 0 // 最低成人销售价
        }, // 产品
        extend: {
          id: 0, // ID
          productId: 0, // 产品ID
          recommendReasons: '', // 推荐理由
          lineFeatures: '', // 线路特色
          costInclude: '', // 费用包含
          costExclude: '', // 费用不包含
          costChild: '', // 儿童价格说明
          zyts: '', // 重要提示
          yqts: '', // 友情提示
          tgsm: '' // 退改说明
        }, // 扩展信息
        stock: [], // 库存
        trip: [], // 行程信息
        pickerOptions0: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        } // 日期
      }
    },
    methods: {
      // 转向订单填写页
      goProductBook (productId, ptStockId, aduNum, chiNum) {
        this.$router.push('/booking/' + productId + '/' + ptStockId + '/' + aduNum + '/' + chiNum)
      },
      strRn (str) {
        if (str === '') {
          return ''
        } else {
          return str.replace(/\n/g, '<br/>')
        }
//        return str
      },
      queryStock () {
        var params = {}
        params.productId = this.$route.params.id
        params.ptStockId = this.stock[0].id
        this.$http.post('/tour/web/productTour/queryStock.htm', params).then(response => {
          var resBody = response.body
          this.loadtype = false
          if (resBody.isSuccess === 0) {
            if (resBody.result.stock.stock >= (this.aduNum + 0 + this.chiNum)) {
              this.goProductBook(params.productId, params.ptStockId, this.aduNum, this.chiNum)
            }
          }
        })
      },
      queryDetail () {
        var params = {}
        params.id = this.$route.params.id
        this.$http.post('/tour/web/productTour/queryDetail.htm', params).then(response => {
          var resBody = response.body
          this.loadtype = false
          if (resBody.isSuccess === 0) {
            this.product = resBody.result.product // 产品
            this.extend = resBody.result.extend // 扩展信息
            this.stock = resBody.result.stock // 库存
            this.trip = resBody.result.trip // 行程
          }
        })
      }
    },
    components: {
      calendar
    },
    mounted () {
      this.queryDetail()
      var that = this
      // 导航栏切换效果实现
      $(window).scroll(function () {
        if ($(window).scrollTop() > 700) {
          that.navCssflag = 1
          that.buybtnShow = true
        } else {
          that.navCssflag = 0
          that.buybtnShow = false
        }
      })
      // 悬浮导航栏自动选中效果
      $(window).scroll(function () {
        var scrollTop = $(document).scrollTop()
        var documentHeight = $(document).height()
        var windowHeight = $(window).height()
        var contentItems = $('#content_d').find('.item')
        var currentItem = ''
        if (scrollTop + windowHeight === documentHeight) {
          currentItem = contentItems.last().attr('id')
        } else {
          contentItems.each(function () {
            var contentItem = $(this)
            var offsetTop = contentItem.offset().top
            if (scrollTop > offsetTop - 10) {
              currentItem = contentItem.attr('id')
            }
          })
        }
        if (currentItem !== '') {
          that.navCssCount = currentItem.substring(4)
        }
      })
      // 前进后退面包屑更新
      resetBreads(this)
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import '../../tuyou/index/js/priceCalenderPlugin/style/css.css'

  .groupkj{
    // width:1178px;
    margin:0 auto;
    border:1px solid #e3e3e3;
    padding:10px;
  }
  .oh {
    overflow: hidden;
  }
  .groupleft{
    width:480px;
    float:left;
  }
  .groupright{
    width:670px;
    float:right;
  }
  .f16 {
    font-size: 16px;
  }
  .f18 {
    font-size: 18px;
  }
  .f13 {
    font-size: 13px;
  }
  .f12 {
    font-size: 12px;
  }
  .f24 {
    font-size: 24px;
  }
  .fl {
    float: left;
    display: inline;
  }
  .mt5 {
    margin-top: 5px;
  }
  .mt7 {
    margin-top: 7px;
  }
  .mt10 {
    margin-top: 10px;
  }
  .mt15 {
    margin-top: 15px;
  }
  .mt20 {
    margin-top: 20px;
  }
  .mt30 {
    margin-top: 30px;
  }
  .fb
    font-weight bold;
  .blue_b {
      padding: 0px 8px;
      display: inline-block;
      border-radius: 2px;
      border: 1px solid #20A0FF;
      color: #20A0FF;
      margin-top:6px;
  }
  .ml5 {
    margin-left: 5px;
  }
  .ml10 {
    margin-left: 10px;
  }
  .ml20 {
    margin-left: 20px;
  }
  .ml30 {
    margin-left: 30px;
  }
  .ml50 {
    margin-left: 50px;
  }
  .mr20 {
    margin-right: 20px;
  }
  .graybg_g {
    background-color: #f7f7f7;
    width: 650px;
    border: 1px solid #e0e0e0;
    padding: 10px;
  }
  .offorange {
    color: #ff7f0e;
  }
  .offgray {
    color: #787878;
  }
  .pb10 {
    padding-bottom: 10px;
  }
  .pt10 {
    padding-top: 10px;
  }
  .fr {
    float: right;
    display: inline;
  }
  .wp12 {
    // width: 1200px;
    margin: 0 auto;
  }
  #menu_fixed {
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    line-height: 50px;
    text-align: center;
    padding: 0;
  }
  #menu_d {
    overflow: hidden;
  }
  #menu_d ul li {
    float: left;
  }
  ul li {
    padding: 0px;
    list-style: none;
    margin-right: 0px;
  }
  #menu_d ul li a {
    display: inline-block;
    width: 120px;
    line-height: 50px;
    margin: 2px 0;
    font-size: 12px;
    color: #646464;
    border: 1px solid #f0f0f0;
    text-decoration: none;
    text-align: center;
    background: #f7f7f7;
  }
  .default .buybtn {
    background-color: #ff9933;
    width: 100px;
    height: 28px;
    line-height: 28px;
    cursor: pointer;
    border-radius: 4px;
    color: #fff;
    display: inline-block;
    font-size: 14px;
    text-align: center;
    display: none;
  }
   ul li a:hover,#menu_d ul li a.current{
    color:#fff;
    background:#20A0FF;
  }
  .probt {
    border-left: 2px solid #20A0FF;
    padding-left: 10px;
  }
  .fixed {
    position: fixed;
    top: 106px;
    background-color: #f7f7f7;
    width: 1180px;
    margin: 0 auto;
  }
  /*itable-表格样式*/
  .itable{background:#fff;width:98%;margin:0 auto;border:1px solid #f0f0f0;}
  .itable tr{text-align:center;}
  .itable td{background:#fff;border-bottom:1px solid #f0f0f0;}
  .itb1{color:#787878;font-size:12px;}
  .itb2{color:#787878;font-size:12px}
  .itb1 td{background-color:#F2F2F2;padding:4px 0}
  .itb2 td{background-color:#fff;padding:4px 0}
  .itb3{color:#323232;font-size:12px}
  .itb3 td{background-color:#fff;padding:4px 0}
  .itb4{color:#363636;font-size:12px}
  .itb4 td{background-color:#FFFFCC;padding:4px 0}
</style>
